<template>
    <div class="chart-box">
        <div class="lengend">
            <div class="b-1">合理区间</div>
            <div class="b-2">院标值</div>
            <div class="b-3">指标值</div>
        </div>
        <lineToRight class="item" title="审限内结案率" :min="60" :max="100" :indicatorValue="95" :standardValue="96"
            :rangeMin="80" :rangeMax="94" />
        <lineToLeft class="item" title="上诉率" :indicatorValue="7.74" :standardValue="8.29"
            :rangeMin="8.29" :rangeMax="20.96" />
        <lineToLeft class="item" title="超12个月未结案件比"  :indicatorValue="80" :standardValue="85"
            :rangeMin="80" :rangeMax="94" />
        <lineToRight class="item" title="调解率" :min="60" :max="100" :indicatorValue="89" :standardValue="96"
            :rangeMin="80" :rangeMax="94" />
        <lineToRight class="item" title="执行完毕率" :min="60" :max="100" :indicatorValue="95" :standardValue="96"
            :rangeMin="80" :rangeMax="94" />
        <lineToLeft class="item" title="首执案件终本率" :min="60" :max="100" :indicatorValue="80" :standardValue="80"
            :rangeMin="80" :rangeMax="94" />
        <lineToRight class="item" title="执行到位率" :min="60" :max="100" :indicatorValue="95" :standardValue="96"
            :rangeMin="80" :rangeMax="94" />
    </div>
</template>

<script>
import lineToRight from './indicator-lines/line-to-right.vue';
import lineToLeft from './indicator-lines/line-to-left.vue';
export default {
    name: "AssessmentIndicators",
    components: { lineToRight, lineToLeft },
    data() {
        return {
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    flex: 1;
    width: 100%;
    padding: 10px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    .lengend {
        display: flex;
        position: absolute;
        right: 70px;
        top: -20px;
        font-size: 12px;
        gap: 20px;

        .b-1 {
            color: #00E4FF;
            display: flex;
            align-items: center;
            line-height: 15px;

            &::before {
                content: '';
                display: inline-block;
                width: 15px;
                height: 15px;
                background: #41666d;
                margin: 0 3px 0 0;
            }
        }

        .b-2 {
            color: #D6AB00;
            display: flex;
            align-items: center;
            line-height: 15px;

            &::before {
                content: '';
                display: inline-block;
                width: 5px;
                height: 15px;
                border-radius: 2.5px 2.5px 2.5px 2.5px;
                background: #d6ab00;
                margin: 0 3px 0 0;
            }
        }

        .b-3 {
            color: #1AC47C;
            display: flex;
            align-items: center;
            line-height: 15px;

            &::before {
                content: '';
                display: inline-block;
                margin: 0 3px 0 0;
                width: 15px;
                height: 15px;
                background: #1ac47c;
            }
        }
    }
}

.item {
    margin: 0 0 20px;
}
</style>